<template>
  <view>
    <view class="u-page">
      <view class="commongap _10 white"></view>
      <view class="top">
        <!-- 轮播图 -->
        <view class="banner">
          <u-swiper
            indicator
            indicatorMode="dot"
            radius="0"
            :list="list1"
            @click="click"
            height="280rpx"
            imgMode="widthFix"
          ></u-swiper>
        </view>
        <!-- 数字结算 -->
        <view class="nums">
          <view class="item">
            <view class="zi">
              <view class="num">{{ user_num }}</view>
              <view class="txt">志愿者总数</view>
            </view>
            <view class="tu"> </view>
          </view>
          <view class="item t2">
            <view class="zi">
              <view class="num">{{ act_num }}</view>
              <view class="txt">活动总数</view>
            </view>
            <view class="tu"> </view>
          </view>
        </view>

        <!-- 按钮们 -->
        <view class="btns">
          <view class="btn" @click="handleMenuButtonClick('群众点单')">
            <view class="tu"></view>
            <view class="zi">群众点单</view>
          </view>
          <view class="btn" @click="handleMenuButtonClick('社区下单')">
            <view class="tu t2"></view>
            <view class="zi">社区下单</view>
          </view>
          <view class="btn" @click="handleMenuButtonClick('志愿活动')">
            <view class="tu t3"></view>
            <view class="zi">志愿活动</view>
          </view>
          <view class="btn" @click="handleMenuButtonClick('签到打卡')">
            <view class="tu t4"></view>
            <view class="zi">党员服务</view>
          </view>
        </view>
      </view>

      <view class="bottom" v-show="!globalConfig.hideIndexPm">
        <view class="tit">
          <view class="zi">志愿排行榜</view>
          <!-- <view class="xl">
            <u-picker
              :show="show"
              :columns="columns"
              @cancel="cancel"
              @confirm="confirm"
            ></u-picker>
            <view @click="show = true">{{ time }} ></view>
          </view> -->
        </view>

        <view class="tabs">
          <u-subsection
            mode="subsection"
            fontSize="14"
            activeColor="#f8d0ae"
            :list="list"
            :current="curNow"
            @change="sectionChange"
          ></u-subsection>
        </view>

        <view class="" v-if="sqList">
          <view class="nrs" v-show="curNow == 0 && sqList.length">
            <view class="tb-head">
              <view>&nbsp;</view>
              <view>社区名称</view>
              <view>所属街道</view>
              <view>活动时长</view>
            </view>
            <view class="tb-body">
              <view
                class="tbb-row"
                v-for="(item, index) in sqList"
                :key="index"
              >
                <view v-if="index == 0">
                  <view class="d1"> NO.{{ index + 1 }} </view>
                </view>
                <view v-else-if="index == 1">
                  <view class="d2"> NO.{{ index + 1 }} </view></view
                >
                <view v-else-if="index == 2">
                  <view class="d3"> NO.{{ index + 1 }} </view></view
                >
                <view v-else>NO.{{ index + 1 }}</view>
                <view>{{ item.gridName }}</view>
                <view>{{ item.streetName }}</view>
                <view>{{ item.actHour }}小时</view>
              </view>
            </view>
          </view>

          <view class="nrs" v-show="curNow == 0 && !sqList.length">
            暂无社区排名...
          </view>
        </view>

        <view v-if="grList">
          <view class="nrs" v-show="curNow == 1">
            <view class="tb-head">
              <view class="v2">&nbsp;</view>
              <view class="v2">姓名</view>
              <view class="v2">签到次数</view>
              <view class="v2" @click="huan"
                >{{ sq }}<u-icon name="arrow-down-fill" size="10"></u-icon
              ></view>

              <view class="v2">活动时长</view>
            </view>
            <view class="tb-body" v-if="grList.length">
              <view
                class="tbb-row"
                v-for="(item, index) in grList"
                :key="index"
              >
                <view class="v2" v-if="index == 0">
                  <view class="d1"> NO.{{ index + 1 }} </view>
                </view>
                <view class="v2" v-else-if="index == 1">
                  <view class="d2"> NO.{{ index + 1 }} </view></view
                >
                <view class="v2" v-else-if="index == 2">
                  <view class="d3"> NO.{{ index + 1 }} </view></view
                >
                <view class="v2" v-else>NO.{{ index + 1 }}</view>
                <view class="v2">{{ item.userName }}</view>
                <view class="v2">{{ item.signNum }}</view>
                <view class="v2">{{ item.streetName }}</view>
                <view class="v2">{{ item.actHour }}小时</view>
              </view>
            </view>


                      <view class="tb-body" v-else>
            暂无个人排名...
          </view>


          </view>


        </view>
      </view>

    </view>
    <view class="commongap _80"></view>
    <mytabbar></mytabbar>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import sceneMixins from "@/utils/sceneMixins";
import mytabbar from "@/components/tabbar/index.vue";
export default {
  options: { styleIsolation: "shared" },
  components: { mytabbar: mytabbar },
  mixins: [sceneMixins],
  computed: {
    ...mapState(["userInfo", "openId"]),
  },
  onShareTimeline(options) {
    return {
      title: " ",

      path: "pages/index/index",
      success(res) {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail(res) {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },
  onShareAppMessage(options) {
    return {
      title: " ",
      path: "pages/index/index",
      success(res) {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail(res) {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },
  data() {
    return {
      act_num: "123",
      user_num: "123",
      list1: [
        require("../../static/imgs/banner2.png"),
        require("../../static/imgs/banner2.png"),
        require("../../static/imgs/banner2.png"),
      ],
      list: ["社区排名", "个人排名"],
      sqList: "",
      sq: "街道",
      grList: "",
      bsqList: "",
      current: 0,
      time: "2022",
      show: false,
      curNow: 0,
      columns: [["2020", "2021", "2022"]],
      showSq: false,
      columns1: [["中国", "美国", "日本"]],

    };
  },

  methods: {
    ...mapMutations(["changeTab"]),
    confirm(e) {
      this.time = e.value[0];
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
    huan() {
      if (this.sq == "街道") {
        this.sq = "本社区";
        this.getData("Y");
      } else {
        this.sq = "街道";
        this.getData("");
      }
    },
    getData(isBsq) {
      var vm = this;
      var utype=vm.userInfo.userType
      vm.getAndLoad(
        "获取首页数据",
        "/api/miniapp/v1/indexData2.jsp?bsq="+isBsq+'&userType='+utype,
        function (res) {
          vm.user_num = res.data.user_num;
          vm.act_num = res.data.act_num;

          vm.sqList = res.data.range_shequ;
          vm.grList=res.data.range_user

        }
      );

    },
    sectionChange(index) {
      this.curNow = index;
    },
    handleMenuButtonClick: function (name) {
      var indexPageHandlerMap = {
        群众点单: {
          url: "/pages/shenbao/index?loadJSON=/wxAssets/wxJSON/群众点单/add.json",
        },
        社区下单: {
          url: "/pages/content/list?loadJSON=/wxAssets/wxJSON/社区下单/list.json",
          pemissionControl: ["userType", ["20", "30"]],
          failMsg: "只有管理员有权进入",
        },
        // 志愿活动: {
        //   type: "switchTab",
        //   tabIndex: 1,
        //   url: "/pages/activity/index",
        // },
        志愿活动: {
          url: "/pages/content/list?loadJSON=/wxAssets/wxJSON/志愿活动/list.json"
        },
        签到打卡: {
          url: "/pages/content/list?loadJSON=/wxAssets/wxJSON/志愿活动/签到打卡.json",
        },
        信息发布: {
          url: "/pages/content/list?loadJSON=/wxAssets/wxJSON/信息发布/信息发布.json",
        },
      };
      var eventHandler = indexPageHandlerMap[name];

      if (eventHandler.pemissionControl) {
        var pc = eventHandler.pemissionControl;
        var judge = this.userInfo && pc[1].includes(this.userInfo[pc[0]]);
        if (!judge) {
          uni.showModal({
            title: "提示",
            content: eventHandler.failMsg || "该功能未暂未开放/或您无权限使用",
            showCancel: false,
          });
          return;
        }
      }

      if (eventHandler.type === "switchTab") {
        this.changeTab(eventHandler.tabIndex);
        uni.switchTab({
          url: eventHandler.url,
        });
      } else if (eventHandler.url) {
        uni.navigateTo({
          url: eventHandler.url,
        });
      }
    },
  },
  onLoad(options) {
          // console.log(this.userInfo)
    var vm = this;
    vm.waitVariable("token").then(() => {
      vm.getData('')
    })
    if (options.share) {
      uni.showLoading({ title: "加载中" });
      vm.waitVariable("token").then(() => {
        if (vm.userInfo) {
          var share = JSON.parse(decodeURIComponent(options.share));
          if (share.path) {
            var url =
              "/" + share.path + "?" + vm.$Util.stringify2(share.options);
            uni.navigateTo({
              url: url,
            });
          } else if (share.tab) {
            vm.changeTab(share.tab);
            uni.switchTab({
              url: share.tabUrl,
            });
          }
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.u-page {
  // height: 100vh;
}
.top {
  width: 100vw;
  height: 570rpx;
  background-color: #ffffff;
  .banner {
    width: 100vw;
    margin: 0 auto;
    margin-top: -20rpx;
    /deep/ {
      .u-swiper {
        background-color: #ffffff !important;
      }
    }
  }
  .nums {
    width: 93%;
    margin: 0 auto;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item {
      width: 330rpx;
      height: 115rpx;
      background-color: #f5ede6;
      border-radius: 16rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .zi {
        width: 110rpx;
        height: 57rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        .txt {
          font-size: 22rpx;
          color: #4b4d4e;
        }
        .num {
          color: #e98252;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
      .tu {
        width: 58rpx;
        height: 52rpx;
        background: url(../../static/imgs/zhiyuanzhe.png) no-repeat;
        background-size: 100% 100%;
      }
    }
    .t2 {
      background-color: #e8f3f2;
      .zi .num {
        color: #86bfad;
        font-size: 32rpx;
        font-weight: bold;
      }
      .tu {
        width: 52rpx;
        height: 52rpx;
        background: url(../../static/imgs/wodehuodong.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .btns {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .btn {
      width: 106rpx;
      height: 150rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      // background-color: #e98252;
      .tu {
        width: 112rpx;
        height: 112rpx;
        background: url(../../static/imgs/xuanze.png) no-repeat;
        background-size: 100% 100%;
      }
      .t2 {
        background: url(../../static/imgs/paixu.png) no-repeat;
        background-size: 100% 100%;
      }
      .t3 {
        background: url(../../static/imgs/daxing.png) no-repeat;
        background-size: 100% 100%;
      }
      .t4 {
        background: url(../../static/imgs/qd.png) no-repeat;
        background-size: 100% 100%;
      }
      .t5 {
        background: url(../../static/imgs/xxfb.png) no-repeat;
        background-size: 100% 100%;
      }
      .zi {
        font-size: 22rpx;
        color: #a1a1a1;
      }
    }
  }
}
.bottom {
  width: 100vw;
  margin-top: 20rpx;
  background-color: #ffffff;
  .tit {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .zi {
      padding-top: 42rpx;
      padding-left: 40rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #4b4d4e;
    }
    .xl {
      padding-top: 42rpx;
      padding-right: 40rpx;
      font-size: 24rpx;
      color: #6eb1dd;
    }
  }
  .tabs {
    width: 90%;
    height: 60rpx;
    margin: 10rpx auto;
  }
  .nrs {
    width: 90%;
    margin: 0 auto;
    margin-top: 30rpx;
    .tb-head {
      width: 100%;
      height: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      view {
        width: 25%;
        height: 100%;
        line-height: 30rpx;
        text-align: center;
        font-size: 20rpx;
        color: #aeaeae;
      }
      .v2 {
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }
    .tb-body {
      width: 100%;
      .tbb-row {
        width: 100%;
        height: 60rpx;
        border-bottom: 1rpx solid #eaeaea;
        display: flex;
        justify-content: space-between;
        align-items: center;
        view {
          width: 25%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24rpx;
          color: #585858;
        }
        .v2 {
          width: 20%;
          height: 100%;
        }
        .d1 {
          width: 80rpx;
          height: 32rpx;
          line-height: 32rpx;
          background-color: #f3b841;
          border-radius: 8rpx;
          color: #ffffff;
        }
        .d2 {
          width: 80rpx;
          height: 32rpx;
          line-height: 32rpx;
          background-color: #97aac9;
          border-radius: 8rpx;
          color: #ffffff;
        }
        .d3 {
          width: 80rpx;
          height: 32rpx;
          line-height: 32rpx;
          background-color: #f2ab84;
          border-radius: 8rpx;
          color: #ffffff;
        }
      }
    }
  }
}
.dt{
  width: 100vw;
  height: 20rpx;
  margin-top: 20rpx;
}
</style>
